<template>
	<view>
		<page-head :headTitle="cityInfo.city" :user="true" :news="true" :code="true"
		 @clickLeftUser="clickLeftUser" @clickGlide="clickCity" @clickRightNews="clickRightNews" @clickRightCode="clickRightCode"></page-head>
		 <view class="m-t9">
			 <view class="scan-mt bg-pic">
			 	<view class="flex p-t-b4">
			 		<view class="flex-1">
						<navigator url="../guide-customList/guide-customList">
							<view class="flex justify-content font-weight index-font">{{pageInfo.countToday}}</view>
							<text class="flex justify-content">今日抢单</text>
						</navigator>
			 		</view>
			 		<view class="flex-1">
						<navigator url="../guide-wallet/guide-wallet">
							<view class="flex justify-content font-weight index-font">{{pageInfo.commission}}</view>
							<text class="flex justify-content">返佣</text>
						</navigator>
			 		</view>
			 		<view class="flex-1">
						<navigator url="../guide-wallet/guide-wallet">
							<view class="flex justify-content font-weight index-font">{{pageInfo.balance}}</view>
							<text class="flex justify-content">余额</text>
						</navigator>
			 		</view>
			 	</view>
			 </view>
			 <view class="index-content bg-white p-t5">
				 <view class="flex align-center p-left p-right">
					 <image src="/static/images/grab-sheet.png" class="grab-sheet">
					 <text class="fs-32 font-weight ml-2">抢单大厅</text>
				 </view>
				 <view v-if="customizeLists>0">
					 <swiper class="p-l-r" style="height: 400rpx;" indicator-active-color="#FFEB10" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" @change="changegg">
						 <swiper-item v-for="(item,index) in pageInfo.customizeLists" :key="item.sn" >
							<view class="m-t-2 ml-2 m-r1">
								<view class="flex fs-3 p-l3 p-b2 color-c justify-between dotted-line border-r index-border">
									<view class="flex p-t-3 align-center">
										<image :src="item.avatar" class="switch-arrow m-r1 border-r1" style="width: 25px;height: 25px;">
										<text>{{item.user_nickname}}</text>
									</view>
									<view class="index-stay fs-2">待接单</view>
								</view>
								<view class="p-l3 border-r2 index-border2 p-b2">
									<view class="flex align-center p-t-3">
										<text>需求描述</text>
										<text class="fs-24 input-goods ml flex-1">{{item.demands}}</text>
									</view>
								</view>
							</view>
						 </swiper-item>
					 </swiper>
					 <view class="flex justify-content m-t12" @click="reservAtions">
						<image src="/static/images/rob.png" class="grab-sheet-img">
					 </view>
				 </view>
				 <!-- 占位图 -->
				 <view v-else class="flex justify-content m-t flex-wrap">
				 	<image src="/static/images/order_none.png" class="order-icon">
				 	<text class="width flex justify-content color-t fs-32">暂时还没有订单~</text>
				 </view>
			 </view>
		 </view>
		 <!-- 点击头像弹框 -->
		 <view v-show="isShow">
		 	<view class="cancel-bj fixed fixed-top" @click="clickLeftHide"></view>
		 	<view class="left-width bg-white fixed fixed-top">
		 		<head-pic :name="avatarInfo.name" :atte="atte" :icon="true" @userClick="userClick" :image="avatarInfo.avatar"></head-pic>
				<view class="adjective">
					<text v-for="(tagsItem,tagsIndex) in avatarInfo.tags" :key="tagsIndex" class="tags border-r1">{{tagsItem}}</text>
					<!-- <text class="tags delicacy border-r1">徒步</text>
					<text class="tags on-foot border-r1">探险</text> -->
				</view>
		 		<view class="list-mt p-l4">
		 			<navigator url="../guide-customList/guide-customList">
						<head-list listName="需求订单" imageList="/static/images/order.png"></head-list>
					</navigator>
					<navigator url="../guide-wallet/guide-wallet">
						<head-list listName="钱包" imageList="/static/images/wallet.png"></head-list>
					</navigator>
					<!-- <navigator url="../goodsManage/goodsManage">
						<head-list listName="商品" imageList="/static/images/commodity-pic.png"></head-list>
					</navigator>
					<navigator url="../invite-friends/invite-friends">
						<head-list listName="邀请好友" imageList="/static/images/invite-friends.png"></head-list>
					</navigator> -->
					<navigator url="../guide-attestation/guide-attestation">
						<head-list listName="导游认证" imageList="/static/images/setup.png"></head-list>
					</navigator>
					<navigator url="../set-up/set-up">
						<head-list listName="设置" imageList="/static/images/setup.png"></head-list>
					</navigator>
		 		</view>
		 	</view>
		 </view>
	</view>
</template>

<script>
import pageHead from '@/components/common/page-head.vue'
import headPic from '@/components/common/head-pic.vue'
import headList from '@/components/common/head-list.vue'
	export default {
		components:{
			pageHead,
			headPic,
			headList
		},
		data() {
			return {
				isShow:false,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				pageInfo:{},
				cityInfo: {},
				customizeLists:[],
				avatarInfo:{},
				atte:true,
				itemof:0
			}
		},
		onShow() {
			var _this = this;
			setTimeout(function(){_this.getAvatarInfo()}, 500);
		},
		onLoad() {
			this.cityInfo = uni.getStorageSync('cityInfo');
			this.getGuideInfo();
			// this.getAvatarInfo();
		},
		methods: {
			changegg(e){
				var i_index = e.detail.current;
				this.itemof = this.pageInfo.customizeLists[i_index].sn;
				//console.log(this.itemof);
			},
			//用户头像
			clickLeftUser(){
				this.isShow = true;
			},
			//编辑资料
			userClick(){
				uni.navigateTo({
				    url: '../guide-edit/guide-edit'
				});
			},
			//切换城市
			clickCity(){
				
			},
			//消息中心
			clickRightNews(){
				uni.navigateTo({
				    url: '../news-core/news-core'
				});
			},
			//二维码
			clickRightCode(){
				uni.navigateTo({
				    url: '../guide-code/guide-code'
				});
			},
			//用户头像隐藏
			clickLeftHide(){
				this.isShow = false;
			},
			//获取首页信息
			getGuideInfo(){
				this.$myRequest({
					method:'POST',
					url:'/api/guide/main'	
				}).then(res=>{ 
					console.log(res)
					if(res.data.code = 1){
						let data = res.data.data;
						this.pageInfo = data;
						this.customizeLists = data.customizeLists.length;
						if(this.customizeLists > 0){
							this.itemof = data.customizeLists[0].sn;
						}
						//console.log(this.itemof);
					}
				});
			},
			//获取头像信息
			getAvatarInfo(){
				this.$myRequest({
					method:'POST',
					url:'/api/guide/avatarinfo'	
				}).then(res=>{
					console.log(res.data);
					let data = res.data;
					if(data.code == 1){
						this.avatarInfo = data.data;
						if(this.avatarInfo.is_auth == 0){
							this.avatarInfo.name = "未验证";
							this.avatarInfo.avatar = "/static/images/weirenzheng.png";
							this.atte = false;
						}
						if (this.avatarInfo.news_num > 0) {
							uni.showModal({
								title: '消息提示',
								content: '您有新的未读消息，是否前往查看？',
								cancelText: '去查看',
								cancelColor: '#F1A733',
								confirmText: '关闭',
								confirmColor: '#808080',
								// showCancel:false,
								success: function (res) {
									if (res.cancel) {
										uni.navigateTo({
										    url: '../news-core/news-core'
										});
									}
								}
							})
						}
					}
				})
			},
			//抢单
			reservAtions(){
				this.$myRequest({
					method:'POST',
					url:'/api/guide/preemptive',
					data:{
						sn:this.itemof
					},
				}).then(res=>{
					console.log(res);
					if(res.data.code == 1){
						uni.showToast({
						    title: '抢单成功',
						    duration: 3000
						});
						setTimeout(function(){
							uni.navigateTo({
								url: '../guide-customList/guide-customList'
							});
						},3000);
					}	
				})
			}

		}
	}
</script>

<style scoped>
page{background-color: #FFFFFF;}
.personal-active text{width: 120rpx;height: 44rpx;display: inline-block; background-color: #fff5ee;border: 2rpx solid #ff802e;color: #ff802e;text-align: center;line-height: 1.5;}
.index-border{box-shadow:0rpx -10rpx 30rpx 4rpx rgba(221,221,221,0.3);}
.index-border2{box-shadow:0rpx 10rpx 30rpx 4rpx rgba(221,221,221,0.3);}
.grab-sheet{width: 27rpx;height: 34rpx;}
.index-content{margin-top: -90rpx;border-radius: 60rpx 60rpx 0 0;}
.index-stay{background-color: #3baeff;border-radius: 4rpx 18rpx 4rpx 4rpx;color: #FFFFFF;padding: 0 10rpx; height: 48rpx;}
.dotted-line{border-bottom: 2rpx dashed #e6e6e6;}
.grab-sheet-img{width: 182rpx;height: 182rpx;}
.list-mt{margin-top: 230rpx;}
.tags{display: block;box-shadow:0 0 12px #FFFFFF inset;line-height: 48rpx; font-size: 20rpx; text-align: center; width: 52rpx;height: 50rpx;border: 2rpx solid #FFFFFF;overflow: hidden;}
.adjective{margin-top: -255rpx;}
.adjective text:nth-child(1){margin: 80rpx 60rpx 0; color: #ff802e;}
.adjective text:nth-child(2){margin: -20rpx 0 30rpx 300rpx;color: #3baeff;}
.adjective text:nth-child(3){margin: -230rpx 0 0 270rpx;color: #4CD964;}
</style>
